<template>
  <div>
    <el-container>
      <el-header style="padding: 10px 10px 0 10px">
        <el-row>
          <el-col :span="2"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="4"
            ><div class="grid-content bg-purple-light">
              <el-image
                style="height: 40px; margin-left: 100px"
                :src="src"
              ></el-image></div
          ></el-col>
          <el-col :span="15"
            ><div class="grid-content bg-purple"><p></p></div
          ></el-col>
          <el-col :span="3"
            ><div class="grid-content bg-purple-light">
              <el-button size="medium" type="primary" @click="toLogin"
                >登录/注册</el-button
              >
            </div></el-col
          >
        </el-row>
      </el-header>
      <el-main style="margin: 0 0; padding: 0 0"
        ><div class="block">
          <el-carousel height="500px">
            <el-carousel-item v-for="item in this.img" :key="item">
              <el-image
                style="width: 100%; height: 100%"
                :src="item"
              ></el-image>
            </el-carousel-item>
          </el-carousel></div
      ></el-main>
      <el-footer>
        <el-row>
          <el-col :span="5"
            ><div class="grid-content bg-purple"><p></p></div
          ></el-col>
          <el-col :span="14"
            ><div class="grid-content bg-purple-light">
              <el-card
                class="filter-container"
                style="margin-top: 15px; border-color: black"
                shadow="never"
              >
                <div style="margin-bottom: 10px">
                  <i class="el-icon-search"></i>
                  <span>快递搜索</span>
                </div>
                <div>
                  <el-form
                    :inline="true"
                    :model="searchDeliverList"
                    size="small"
                    label-width="140px"
                  >
                    <el-form-item label="快递单号:">
                      <el-input
                        style="width: 203px"
                        v-model="searchDeliverList.courierIds"
                        placeholder="请输入快递单号，支持多个，英文逗号分隔"
                        clearable
                      ></el-input>
                    </el-form-item>

                    <el-form-item label="手机号:">
                      <el-input
                        style="width: 203px"
                        v-model="searchDeliverList.phone"
                        placeholder="请输入手机号"
                        clearable
                      ></el-input>
                    </el-form-item>

                    <el-button
                      style="float: right"
                      @click="handleSearchList()"
                      type="primary"
                      size="small"
                    >
                      查询
                    </el-button>
                  </el-form>
                </div>
              </el-card>
            </div></el-col
          >
          <el-col :span="5"
            ><div class="grid-content bg-purple"><p></p></div
          ></el-col>
        </el-row>
        <el-table
          :data="courierList"
          style="width: 90%; margin: 15px auto"
          v-if="isShow"
          v-loading="listLoading"
          border
        >
          <el-table-column label="快递单号" width="230" align="center">
            <template slot-scope="scope">{{ scope.row.courierId }}</template>
          </el-table-column>
          <el-table-column label="寄件人" width="120" align="center">
            <template slot-scope="scope">{{
              scope.row.sender.username
            }}</template>
          </el-table-column>
          <el-table-column label="收件人" width="120" align="center">
            <template slot-scope="scope">{{
              scope.row.receiver.username
            }}</template>
          </el-table-column>
          <el-table-column label="类型" width="80" align="center">
            <template slot-scope="scope"
              ><p v-if="scope.row.type == '0'">书籍</p>
              <p v-else-if="scope.row.type == '1'">衣物</p>
              <p v-else-if="scope.row.type == '2'">日常用品</p>
              <p v-else-if="scope.row.type == '3'">食品</p>
              <p v-else-if="scope.row.type == '4'">家用电器</p>
              <p v-else-if="scope.row.type == '5'">电子器件</p>
              <p v-else-if="scope.row.type == '6'">易碎品</p>
              <p v-else-if="scope.row.type == '7'">信件</p>
              <p v-else>其他</p></template
            >
          </el-table-column>
          <el-table-column label="重量" width="80" align="center">
            <template slot-scope="scope">{{ scope.row.weight }}</template>
          </el-table-column>
          <el-table-column label="价格" width="80" align="center">
            <template slot-scope="scope">{{ scope.row.price }}</template>
          </el-table-column>
          <el-table-column label="物流状态" width="120" align="center">
            <template slot-scope="scope">
              <p v-if="scope.row.status == '6'">已签收</p>
              <p v-else-if="scope.row.status == '-2'">已取消</p>
              <p v-else-if="scope.row.status == '1'">已揽件</p>
              <p v-else-if="scope.row.status == '4'">派送中</p>
              <p v-else-if="scope.row.status == '-3'">取件失败</p>
              <p v-else-if="scope.row.status == '-1'">丢失</p>
              <p v-else-if="scope.row.status == '2'">已发货</p>
              <p v-else-if="scope.row.status == '3'">运输中</p>
              <p v-else-if="scope.row.status == '0'">待揽件</p>
              <p v-else>待取件</p>
            </template>
          </el-table-column>
          ‘<el-table-column label="寄件时间" width="190" align="center">
            <template slot-scope="scope">{{ scope.row.createTime }}</template>
          </el-table-column>
          <el-table-column label="紧急程度" width="100" align="center">
            <template slot-scope="scope">
              <p v-if="scope.row.urgency == '0'">标快</p>
              <p v-else>特快</p>
            </template>
          </el-table-column>
          <el-table-column label="签收时间" width="210" align="center">
            <template slot-scope="scope"
              ><p v-if="scope.row.endTime != undefined">
                {{ scope.row.endTime }}
              </p>
              <p v-else>未签收</p></template
            >
          </el-table-column>
          <el-table-column
            fixed="right"
            label="快递物流"
            width="200"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="logistics(scope.row.logistics, scope.row)"
                >查看快递物流
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog
        title="查看快递物流"
        :visible.sync="logisticsDialogVisible"
        width="50%"
        :before-close="handleClose"
      >
        <span>
          <el-timeline>
            <el-timeline-item
              v-for="(item,index) in logisticsData"
              :key="index"
              :timestamp="item.Time"
              placement="top"
            >
              <el-card>
                <h4>{{ item.describe }}</h4>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="logisticsDialogVisible = false"
            >返 回</el-button
          >
        </span>
      </el-dialog>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import logo from "../../assets/fzu.jpg";
import image1 from "../../assets/image1.jpg";
import image2 from "../../assets/image2.jpg";
import image3 from "../../assets/image3.jpg";
import image4 from "../../assets/image4.jpg";
export default {
  name: "deliverHome",
  data() {
    return {
      src: logo,
      img: [image1, image2, image3, image4],
      searchDeliverList: {
        phone: "",
        courierIds: "",
      },
      courierList: [],
      isShow: false,
      listLoading: true,
      logisticsDialogVisible: false,
      logisticsData: [],
    };
  },
  methods: {
    handleSearchList() {
      if (
        this.searchDeliverList.phone == "" &&
        this.searchDeliverList.courierIds == ""
      ) {
        this.$message.error("至少填写一项搜索条件");
      } else {
        this.axios
          .get("api/customer/delivery/query", {
            params: this.searchDeliverList,
          })
          .then((response) => {
            console.log(response);
            if (response.data.code == "200") {
              if (response.data.value.length == 0) {
                this.$message({
                  message: "该快递暂无信息",
                  type: "warning",
                });
              } else {
                this.$message({
                  message: "搜索成功",
                  type: "success",
                });
                this.isShow = true;
                this.listLoading = true;
                this.courierList = response.data.value;
                this.listLoading = false;
              }
            } else {
              this.$message.error("搜索失败");
            }
          })
          .catch((error) => {
            this.$message.error("搜索失败");
          });
      }
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    toLogin() {
      this.$router.push("/");
    },
    timestampToTime(times) {
      let time = times[1];
      let mdy = times[0];
      mdy = mdy.split("/");
      let month = parseInt(mdy[0]);
      let day = parseInt(mdy[1]);
      let year = parseInt(mdy[2]);
      return year + "-" + month + "-" + day + " " + time;
    },
    async logistics(logistics, deliver) {
      console.log(deliver)
      this.logisticsData = [] ;
      this.logisticsDialogVisible = true;
      var temp = {};
      if (deliver.status == "6") {
        temp.Time = deliver.endTime;
        temp.describe = "已签收:" + deliver.receiver.address;
        this.logisticsData.push(temp);
      }else {
        await this.axios
        .get("api/customer/delivery/getDeliveryPath", {
          params: {
            courierId: deliver.courierId,
          },
        })
        .then((response) => {
          if(response.data.value.day != undefined){
            temp = {};
            temp.Time = this.timestampToTime(new Date().toLocaleString('en-US',{hour12: false}).split(" "))
            temp.describe = '您的快递预计还有'+ response.data.value.day +'天到达'
            this.logisticsData.push(temp);
          }else if( response.data.value.day == undefined && logistics == undefined){
            temp = {};
            temp.Time = this.timestampToTime(new Date().toLocaleString('en-US',{hour12: false}).split(" "))
            temp.describe = '暂无快递信息'
            this.logisticsData.push(temp);
          }
        })
        .catch((error) => {});
      }
      while (logistics != undefined) {
        temp = {};
        if (logistics.status == "0") {
          temp.Time = logistics.createTime;
          temp.describe = "已到达" + logistics.network.name;
        } else {
          var temp1 = {};
          temp1.Time = logistics.leaveTime;
          temp1.describe = "已离开" + logistics.network.name;
          this.logisticsData.push(temp1);
          temp.Time = logistics.createTime;
          temp.describe = "已到达" + logistics.network.name;
        }
        this.logisticsData.push(temp);
        logistics = logistics.parent;
      }
      console.log(this.logisticsData)
    },
  },
};
</script>


<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>